<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线客服 - 客服端</title>
    <!-- <script src="js/jquery-1.8.3.min.js"></script> -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/weipaer.css">
    <link rel="stylesheet" href="css/server.css">
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <header>
        <div class="container" id="haederTitle">
            Node.js + Express + Socket.io + Mysql 构建在线客服聊天系统 ( 客服端 )
        </div>
    </header>
    <div id="wrapper" class="bg-info" style="">
        <nav class="navbar navbar-inverse bg-success  navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav user-list2">
                <li class="sidebar-brand">
                    <a href="#" id='h4'>
                        <h4 class="user-count">在线游客(<span>100</span>)<span
                                class="glyphicon glyphicon-chevron-left is-open animated  active fadeInLeft"
                                data-toggle="offcanvas" id="close"></span></h4>
                    </a>
                </li>
                <li class="">
                    <a href="#"><i class="fa fa-fw fa-home"></i>1. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-folder"></i>2. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-file-o"></i>3. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-cog"></i>4. 游客12 <span class="badge">4</span></a>
                </li>
                <li class="">
                    <a href="#" class=""><i class="fa fa-fw fa-plus"></i>5. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-bank"></i>6. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-dropbox"></i>7. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-twitter"></i>8. 游客12 <span class="badge">4</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-fw fa-twitter"></i>9. 游客12 <span class="badge">4</span></a>
                </li>

            </ul>
        </nav>
        <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top " style=""></span>
            <span class="hamb-middle" style=""></span>
            <span class="hamb-bottom" style=""></span>
        </button>
    </div>




    <div id="user-container" class="is-open animated  active fadeInLeft" style="">
        <h4 class="user-count">在线游客(<span>100</span>)<span class="glyphicon glyphicon-chevron-left" id="close1"></span>
        </h4>
        <div class="user-list">
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person on"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            <li class="person"> <a href="#"><i class="fa fa-fw fa-user"></i>6. 游客12 <span class="badge">4</span></a></li>
            
        </div>
    </div>
    <div class="container">
        <div class="chat-info col-md-2"></div>
        <div class="chat col-md-8">
            <div class="chat-content">
                <div class="chat-for-server chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick">游客12 <span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                    </div>
                </div>
                <div class="chat-for-user chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick"> 我<span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-for-server chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick">游客13 <span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                    </div>
                </div>
                <div class="chat-for-user chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick"> 我<span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-for-server chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick">游客13 <span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                    </div>
                </div>
                <div class="chat-for-user chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick"> 我<span class="time">2020年3月10日12:47:07</span></div>
                    </div>
                    <div class="chat-item-detail">
                        <div class="chat-item-content">
                            sdasasdassddasdadsdsdasdadadaddsdasdadadasdadassssssssssssssssssssssssssss
                        </div>
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="chat-tools btn-group" style="width: 100%;">
                <button class="btn btn-primary glyphicon glyphicon-font "> </button>
                <button class="btn btn-danger glyphicon glyphicon-picture"></button>
                <button class="btn btn-success glyphicon glyphicon-earphone"></button>
                <button class="btn btn-info glyphicon glyphicon-phone"></button>
                <button class="btn btn-warning glyphicon glyphicon-warning-sign"></button>
                <button class="btn btn-default glyphicon glyphicon-none">工具栏</button>
            </div>

            <div class="chat-input">
                <div class="chat-input-content">
                    <textarea class="form-control" cols="30" rows="4"></textarea>
                </div>
                <div class="chat-input-btn">
                    <button class="btn btn-success" id='send'>发送(Shfit + Enter)</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            var trigger = $('.hamburger'),
                overlay = $('.overlay'),
                isClosed = false;
            trigger.click(function () {
                hamburger_cross(overlay);
            });
            var trigger1 = $('#close');
            trigger1.click(function () {
                hamburger_cross(overlay);
            });

            var trigger2 = $('#user-container');
            var trigger11 = $('#close1');
            trigger11.click(function () {
                hamburger_cross(trigger2);
            });
            function hamburger_cross(taiger) {
                if (isClosed == true) {
                    // overlay.hide();
                    trigger.removeClass('is-open');
                    trigger.addClass('is-closed');
                    taiger.hide();
                    taiger.removeClass('is-open');
                    taiger.addClass('is-closed');
                    isClosed = false;
                } else {
                    // overlay.show();
                    trigger.removeClass('is-closed');
                    trigger.addClass('is-open');
                    taiger.show();
                    taiger.removeClass('is-closed');
                    taiger.addClass('is-open');
                    isClosed = true;
                }
            }
            $('[data-toggle="offcanvas"]').click(function () {
                $('#wrapper').toggleClass('toggled');
                $('#user-container').toggleClass('toggled');
            });
        });
    </script>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="/chat/socket.io.js"></script>
    <script src="js/server.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/zepto.js"></script>
    <script src="js/js.cookie.min.js"></script>

</body>

</html>